<template>
    <div class="com-container" style="fontSize:12px">
        <!-- :style="popheight+'px'" :style="RiskWidth" -->
        <div class="com-chart com-charts" ref="echarts" style="z-index:555;position: relative;"></div>
    </div>
</template>

<script>
export default {
    props: ["commonData", "time1", "time2", "xData"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            xDatas: null
        };
    },
    watch: {
        commonData: function (data) {
            this.allData = data
            this.getData();
        },
        xData: function (data) {
            this.xDatas = data
            this.getData();
        },
        time1: function () {
            this.getData();
        },
        time2: function () {
            this.getData();
        },
    },

    mounted() {
        setTimeout(() => {
            this.initChart();

            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
        }, 500);
    },

    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {

            this.chartInstance = this.$echarts.init(this.$refs.echarts);
            // console.log(this.chartInstance);
            const CubeLeft = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c0 = [shape.x, shape.y];
                    const c1 = [shape.x - 9, shape.y - 7];//左上角
                    const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 10];//右上角
                    const c3 = [xAxisPoint[0], xAxisPoint[1]];
                    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
                },
            });
            const CubeRight = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c1 = [shape.x, shape.y];
                    const c2 = [xAxisPoint[0], xAxisPoint[1]];
                    const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 2];//右下
                    const c4 = [shape.x + 18, shape.y - 1];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            const CubeTop = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const c1 = [shape.x, shape.y];
                    const c2 = [shape.x + 18, shape.y - 1];//右下
                    const c3 = [shape.x + 9, shape.y - 8];//右上
                    const c4 = [shape.x - 9, shape.y - 7];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            this.$echarts.graphic.registerShape('CubeLeft', CubeLeft);
            this.$echarts.graphic.registerShape('CubeRight', CubeRight);
            this.$echarts.graphic.registerShape('CubeTop', CubeTop);

            var option = {

                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '5%',
                    top: '10%',
                    containLabel: true,
                },
                legend: {
                    data: ['总盘数', '初级报警', '中级报警', '高级报警'],
                    textStyle: {
                        align: 'right',
                    },
                    // top: '2%',
                    // right: '2%',
                    left: "center",
                    top: "5%",
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    // data: ['水', '水泥1', '水泥2', '骨料1', '骨料2', '骨料3', '骨料4', '骨料5', '粉煤灰', '矿粉', '外加剂1', '外加剂2'],//数据
                    // data:this.xDatas,
                    axisLabel: {
                        color: ""
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#9D9EA0',

                        }
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: true,
                        lineStyle: {
                            color: '#DEDEDE',
                            // 	opacity:0.1
                        }
                    },
                    axisTick: false,
                },
                yAxis: {
                    // min: 0,//最小
                    // max: 1200,//最大
                    // interval: 200,//相差
                    name: "(数量)",//名称
                    type: 'value',

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#9D9EA0',

                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#9D9EA0"
                        }
                    },
                    splitLine: {//分隔辅助线

                    },
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {
                            readOnly: true,
                            lang: [this.time1.substr(0, 10) + "至" + this.time2.substr(0, 10) + "报警数量分析", '关闭'],
                            // optionToContent: function (opt) {


                            //     var axisData = opt.xAxis[0].data;
                            //     console.log(axisData);
                            //     var series = opt.series;

                            //     console.log(5555, series)
                            //     var line = '';

                            //     axisData.map((item) => {
                            //         line += '<td>' + item + '</td>'
                            //     })
                            //     var table = '<table class="echartsTable"><tbody><tr>'
                            //         + '<td >报警类型</td>' +
                            //         line +



                            //         + '</tr>';
                            //     var td1 = ''
                            //     for (var hj = 0; hj < series[0].data.length; hj++) {
                            //         td1 += '<td>' + series[0].data[hj] + '</td>'
                            //     }
                            //     var td2 = ''
                            //     for (var h = 0; h < series[1].data.length; h++) {
                            //         td2 += '<td>' + series[1].data[h] + '</td>'
                            //     }
                            //     var td3 = ''
                            //     for (var n = 0; n < series[2].data.length; n++) {
                            //         td3 += '<td>' + series[2].data[n] + '</td>'
                            //     }
                            //     var td4 = ''
                            //     for (var f = 0; f < series[3].data.length; f++) {
                            //         td4 += '<td>' + series[3].data[f] + '</td>'
                            //     }

                            //     table +=
                            //         '<tr>' +
                            //         '<td>' + series[0].name + '</td>' + td1 +

                            //         + '</tr>' +
                            //         '<tr>' +

                            //         '<td>' + series[1].name + '</td>' + td2 +

                            //         + '</tr>' +
                            //         '<tr>' +

                            //         '<td>' + series[2].name + '</td>' + td3 +

                            //         + '</tr>' +
                            //         '<tr>' +

                            //         '<td>' + series[3].name + '</td>' + td4 +
                            //         + '</tr>'
                            //         ;


                            //     table += '</tbody></table>';
                            //     console.log(table)
                            //     return table;

                            // }
                            optionToContent: function (opt) {

                                let axisData = opt.xAxis[0].data; //坐标数据
                                let series = opt.series; //折线图数据
                                let tdHeads = '<td  style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333"">报警类型</td>'; //表头
                                let tdBodys = ''; //数据
                                // console.log(series)
                                series.forEach(function (item) {
                                    //组装表头
                                    tdHeads += `<td style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333">${item.name}</td>`;
                                });
                                let table = `<table   border="1" style=" width: 96%;margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" class="dataViewTable"><tbody><tr>${tdHeads} </tr>`;

                                for (let i = 0, l = axisData.length; i < l; i++) {
                                    for (let j = 0; j < series.length; j++) {
                                        //组装表数据
                                        tdBodys += `<td>${series[j].data[i]}</td>`;
                                    }
                                    table += `<tr style="line-height: 30px;height: 30px;"><td style="padding: 2px 10px;text-align: center">${axisData[i]} </td>${tdBodys}</tr>`;
                                    tdBodys = '';
                                }
                                table += '</tbody></table>';
                                return table;
                            },
                        },
                        magicType: {
                            type: ['line', 'bar'],
                            option: {
                                type: 'line'
                            }
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '总盘数',
                        type: 'bar',
                        barMaxWidth: 15,
                        zlevel: 10,
                        smooth: true, //平滑曲线显示
                        // barGap: '100%',
                        //  data: value,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(163,93,225,0.8)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(163,93,225,0.4)'
                                    }]
                                },
                                barBorderRadius: [30, 30, 0, 0],
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'rgba(163,93,225,0.8)',
                                        fontSize: 12,
                                        fontWeight: 400,
                                    },
                                },
                            }
                        },
                    },
                    {
                        name: '初级报警',
                        type: 'bar',
                        barMaxWidth: 15,
                        zlevel: 10,
                        smooth: true, //平滑曲线显示
                        // barGap: '100%',
                        //  data: value,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(80,147,254,0.8)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(80,147,254,0.4)'
                                    }]
                                },
                                barBorderRadius: [30, 30, 0, 0],
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'rgba(80,147,254,0.8)',
                                        fontSize: 12,
                                        fontWeight: 400,
                                    },
                                },
                            }
                        },
                    },
                    {
                        name: '中级报警',
                        type: 'bar',
                        barMaxWidth: 15,
                        zlevel: 10,
                        smooth: true, //平滑曲线显示
                        // barGap: '100%',
                        //  data: value,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(230,162,60,0.8)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(230,162,60,0.4)'
                                    }]
                                },
                                barBorderRadius: [30, 30, 0, 0],
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'rgba(230,162,60,0.8)',
                                        fontSize: 12,
                                        fontWeight: 400,
                                    },
                                },
                            }
                        },
                    },
                    {
                        name: '高级报警',
                        type: 'bar',
                        barMaxWidth: 15,
                        zlevel: 10,
                        smooth: true, //平滑曲线显示
                        // barGap: '100%',
                        //  data: value,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(245,108,108,0.8)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(245,108,108,0.4)'
                                    }]
                                },
                                barBorderRadius: [30, 30, 0, 0],
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'rgba(245,108,108,0.8)',
                                        fontSize: 12,
                                        fontWeight: 400,
                                    },
                                },
                            }
                        },
                    },
                ],
            };
            this.chartInstance.setOption(option);
        },
        getData() {



            var that = this

            setTimeout(() => {
                that.updateChart();
                // that.updateChart();

            }, 800)
        },
        updateChart() {

            var data = this.allData

            // "allCount":"xx",//总盘数 
            // "lowCount": "1111",// 初级预警
            //     "midCount": "1111",// 中级预警
            //     "highCount": "1111",// 高级预警
            var allCount = []
            data.map(item => {
                allCount.push(item.allCount)
            })
            var lowCount = []
            data.map(item => {
                lowCount.push(item.lowCount)
            })
            var midCount = []
            data.map(item => {
                midCount.push(item.midCount)
            })
            var highCount = []
            data.map(item => {
                highCount.push(item.highCount)
            })
            // var updateData = null
            // if (data.length > 0 && data != undefined) {
            //     updateData = [data[0].F_WaterActualValue, data[0].F_Cement1ActualValue, data[0].F_Cement2ActualValue, data[0].F_Aggregate1ActualValue, data[0].F_Aggregate2ActualValue, data[0].F_Aggregate3ActualValue, data[0].F_Aggregate4ActualValue, data[0].F_Aggregate5ActualValue, data[0].F_OreActualValue, data[0].F_FlyashActualValue, data[0].F_Admixture1ActualValue, data[0].F_Admixture2ActualValue]
            // } else {
            //     updateData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            // }

            // const value = updateData;
            // console.log(value)
            var dataOption = {
                title: {


                    text: this.time1.substr(0, 10) + "至" + this.time2.substr(0, 10) + "报警数量分析",
                },
                xAxis: {
                    data: this.xDatas

                    // data: ['拌和温度', '拌和时间', '矿粉', '1#仓碎石', '2#仓碎石', '3#仓碎石', '4#仓碎石', '5#仓碎石', '6#仓碎石', '沥青'],//数据
                    // data: this.xDatas
                },
                series: [
                    //     {

                    //     data: value,
                    // },
                    {
                        // data: value,
                        data: allCount,

                    }, {
                        // data: value,
                        data: lowCount,
                    }, {
                        // data: value,
                        data: midCount,
                    }, {
                        // data: value,
                        data: highCount,
                    }]
            };

            this.chartInstance.setOption(dataOption);
        },
        screenAdapter() {
            const titleFontSize = (this.$refs.echarts.offsetWidth / 100);
            // console.log(titleFontSize);

            //   和分辨率大小相关的配置项
            const adapterOption = {
                title: {



                    textStyle: {
                        fontSize: titleFontSize,
                        // fontWeight: 500

                    },

                },


            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();

        },
    },
};
</script>

<style lang="less" scope>
.com-chart::after {
    //     display: block;
    //     content: "123";
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //   width: 50px;
    //   height: 40px;
    //   border: 1px solid red;
    //   z-index: 9999;
}

.com-charts ::after {
    //   display: block;
    //   content: "123";
    //   position: absolute;
    //   transform: translate(-50%,-50%);
    //   left: 50%;
    //   top: 60%;
    // width: 47%;
    // height: 90%;

    // z-index: 9999;
}

/* echarts表格样式 */
.echartsTable {
    width: 100%;
    text-align: center;
    min-height: 25px;
    line-height: 25px;
    border-collapse: collapse;
    padding: 2px;
    font-size: 12px;
}



.echartsTable,
.echartsTable tr th,
.echartsTable tr td {
    // border: 1px solid gray;
    // flex: 1;
    border-bottom: 1px solid #DDDDDD;
    text-align: left;
    padding: 2px 5px;
}

.echartsTable .typeshi {
    width: 50%;
}

.echartsTable tr:nth-child(even) {
    border-bottom: 1px solid gray;
    background: #F9F9F9;
}
</style>
